<div class="my-2">
  <span class="text-lg mr-2">
    {{ 'PAC.Xpert.Analysis' | translate: {Default: 'Analysis'} }}
  </span>

  <ngm-select class="inline-block w-48" placeholder="Select time range" icon="ri-calendar-line"
    [selectOptions]="TimeRanges" [(ngModel)]="timeRangeValue" />
</div>

<div class="grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6">
  <div class="flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-sm">
    <div class="mb-3">
      <div class="flex items-start p-1">
        <div class="group">
          <div
            class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
          >
            {{ 'PAC.Xpert.TotalConversations' | translate: {Default: 'Total Conversations'} }}
            <div class="w-5 h-5 ml-1 flex items-center justify-center opacity-30 hover:opacity-100"
              [matTooltip]="'PAC.Xpert.TotalConversationsTooltip' | translate: {Default: 'Daily xpert conversations count; Xpert author and debugger excluded'}"
              matTooltipPosition="above"
            >
              <i class="ri-question-line text-text-secondary text-lg"></i>
            </div>
          </div>
          <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
            {{ selectedTimeOption() | i18n }}
          </div>
          <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
        </div>
      </div>
    </div>

    <pac-statistics-chart [data]="dailyConv()" [measureLabel]=" 'PAC.Xpert.Conversations' | translate: {Default: 'Conversations'} " />
  </div>

  <div class="flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-sm">
    <div class="mb-3">
      <div class="flex items-start p-1">
        <div class="group">
          <div
            class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
          >
            {{ 'PAC.Xpert.ActiveUsers' | translate: {Default: 'Active Users'} }}
            <div class="w-5 h-5 ml-1 flex items-center justify-center opacity-30 hover:opacity-100"
              [matTooltip]="'PAC.Xpert.ActiveUsersTooltip' | translate: {Default: 'Unique users who interacted with xpert; Xpert author and debugger excluded'}"
              matTooltipPosition="above"
            >
              <i class="ri-question-line text-text-secondary text-lg"></i>
            </div>
          </div>
          <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
            {{ selectedTimeOption() | i18n }}
          </div>
          <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
        </div>
      </div>
    </div>

    <pac-statistics-chart [data]="dailyEndUsers()" [measureLabel]=" 'PAC.Xpert.ActiveUsers' | translate: {Default: 'Active Users'} "/>
  </div>
</div>

<div class="grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6">
  <div class="flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-sm">
    <div class="mb-3">
      <div class="flex items-start p-1">
        <div class="group">
          <div
            class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
          >
            {{ 'PAC.Xpert.AvgSessionInteractions' | translate: {Default: 'Avg. Session Interactions'} }}
            <div class="w-5 h-5 ml-1 flex items-center justify-center opacity-30 hover:opacity-100"
              [matTooltip]="'PAC.Xpert.AvgSessionInteractionsTooltip' | translate: {Default: 'User interactions per session with xpert'}"
              matTooltipPosition="above"
            >
              <i class="ri-question-line text-text-secondary text-lg"></i>
            </div>
          </div>
          <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
            {{ selectedTimeOption() | i18n }}
          </div>
          <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
        </div>
      </div>
    </div>

    <pac-statistics-chart [data]="averageSessionInteractions()" totalType="avg"
      [measureLabel]="'PAC.Xpert.AvgSessionInteractions' | translate: {Default: 'Avg. Session Interactions'}"/>
  </div>

  <div class="flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-sm">
    <div class="mb-3">
      <div class="flex items-start p-1">
        <div class="group">
          <div
            class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
          >
            {{ 'PAC.Xpert.TotalMessages' | translate: {Default: 'Total Messages'} }}
            <div class="w-5 h-5 ml-1 flex items-center justify-center opacity-30 hover:opacity-100"
              [matTooltip]="'PAC.Xpert.TotalMessagesTooltip' | translate: {Default: 'Daily interactions count with xpert'}"
              matTooltipPosition="above"
            >
              <i class="ri-question-line text-text-secondary text-lg"></i>
            </div>
          </div>
          <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
            {{ selectedTimeOption() | i18n }}
          </div>
          <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
        </div>
      </div>
    </div>

    <pac-statistics-chart [data]="dailyMessages()" [measureLabel]="'PAC.Xpert.TotalMessages' | translate: {Default: 'Total Messages'}"/>
  </div>
</div>

<div class="grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6">
  <div class="flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-sm">
    <div class="mb-3">
      <div class="flex items-start p-1">
        <div class="group">
          <div
            class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
          >
            {{ 'PAC.Xpert.UserSatisfactionRate' | translate: {Default: 'User Satisfaction Rate'} }}
            <div class="w-5 h-5 ml-1 flex items-center justify-center opacity-30 hover:opacity-100"
              [matTooltip]="'PAC.Xpert.UserSatisfactionRateTooltip' | translate: {Default: 'The number of likes per 1,000 messages. This indicates the proportion of answers that users are highly satisfied with.'}"
              matTooltipPosition="above"
            >
              <i class="ri-question-line text-text-secondary text-lg"></i>
            </div>
          </div>
          <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
            {{ selectedTimeOption() | i18n }}
          </div>
          <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
        </div>
      </div>
    </div>

    <pac-statistics-chart [data]="userSatisfactionRate()"
      [measureLabel]="'PAC.Xpert.UserSatisfactionRate' | translate: {Default: 'User Satisfaction Rate'}"/>
  </div>

  <div class="flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-sm">
    <div class="mb-3">
      <div class="flex items-start p-1">
        <div class="group">
          <div
            class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
          >
            {{ 'PAC.Xpert.TokenOutputSpeed' | translate: {Default: 'Token Output Speed'} }}
            <div class="w-5 h-5 ml-1 flex items-center justify-center opacity-30 hover:opacity-100"
              [matTooltip]="'PAC.Xpert.TokenOutputSpeedTooltip' | translate: {Default: 'Measure the performance of the LLM. Count the Tokens output speed of LLM from the beginning of the request to the completion of the output.'}"
              matTooltipPosition="above"
            >
              <i class="ri-question-line text-text-secondary text-lg"></i>
            </div>
          </div>
          <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
            {{ selectedTimeOption() | i18n }}
          </div>
          <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
        </div>
      </div>
    </div>

    <pac-statistics-chart [data]="tokensPerSecond()" totalType="avg" unit="Token/s"
      [measureLabel]="'PAC.Xpert.TokenOutputSpeed' | translate: {Default: 'Token Output Speed'}"/>
  </div>
</div>

<div class="flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-sm">
  <div class="mb-3">
    <div class="flex items-start p-1">
        <div class="group">
        <div
            class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
        >
            {{ 'PAC.Xpert.TokenUsage' | translate: {Default: 'Token Usage'} }}
            <div class="w-5 h-5 ml-1 flex items-center justify-center opacity-30 hover:opacity-100"
            [matTooltip]="'PAC.Xpert.TokenUsageTooltip' | translate: {Default: 'Reflects the daily token usage of this expert request ai model, used for cost control'}"
            matTooltipPosition="above"
            >
            <i class="ri-question-line text-text-secondary text-lg"></i>
            </div>
        </div>
        <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
            {{ selectedTimeOption() | i18n }}
        </div>
        <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
        </div>
    </div>
  </div>

  <pac-statistics-token-usage class="w-full"
    [tokenCost]="tokenCost()"
  />
</div>